<template>
  <div class="workorder-home">
    <el-container style="height: 100vh">
      <!-- 侧边导航栏 -->
      <el-aside width="220px" class="sidebar">
        <div class="sidebar-title">
          <span>无人机作业工单管理平台</span>
        </div>

        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
          <el-menu-item index="order-manage" v-if="accountNumber != 'lingdao'">
            <el-icon>
              <Document />
            </el-icon>
            <span>工单管理</span>
          </el-menu-item>
          <el-menu-item index="order-approve" v-if="accountNumber != 'yuangong'">
            <el-icon>
              <Edit />
            </el-icon>
            <span>工单审批</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧内容区 -->
      <el-main class="main-content">
        <div v-if="activeMenu === 'order-manage'">
          <!-- 右侧内容区顶部栏 -->
          <div class="right-top-bar">
            <div class="top-bar-left">
              <span class="breadcrumb">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>工单管理</el-breadcrumb-item>
                </el-breadcrumb>
              </span>
            </div>
            <div class="top-bar-right">
              <span class="user-info">欢迎，{{ username }}</span>
            </div>
          </div>
          <!-- 工单管理内容 -->
          <div class="content">
            <div class="page-title-bar">
              <h2 class="page-title">工单申请列表</h2>
              <el-button type="primary" @click="goToApplyOrder" class="add-btn">
                <i class="el-icon-plus"></i> 提交工单申请
              </el-button>
            </div>
            <el-skeleton v-if="loading" :loading="loading" :rows="6" style="padding: 20px"></el-skeleton>
            <div class="workorder-list" v-else>
              <div class="workorder-card" v-for="(item, index) in workorderList" :key="index"
                @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
                <div class="workorder-info">
                  <div class="workorder-header">
                    <h3 class="workorder-title">{{ item.taskName }}</h3>
                    <span :class="['status-tag', statusClass(item.status)]">
                      {{ statusText(item.status) }}
                    </span>
                  </div>
                  <div class="workorder-meta">
                    <div class="meta-item">
                      <i class="el-icon-location"></i>
                      <span>作业地点：{{ item.address }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-time"></i>
                      <span>预计作业时间：{{ item.estimatedHomeworkTime }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-warning"></i>
                      <span>优先级：{{ item.priority }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-document"></i>
                      <span>关联项目：{{ item.projectInfo }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-cpu"></i>
                      <span>无人机：{{ item.uavName }}</span>
                    </div>
                  </div>
                  <div class="workorder-description">
                    <i class="el-icon-location"></i>
                    <p>任务描述：{{ item.taskDescription || "暂无任务描述" }}</p>
                  </div>
                  <!-- 移除修改按钮 -->
                </div>
              </div>
              <!-- 空状态处理 -->
              <div class="empty-state" v-if="workorderList.length === 0">
                <el-empty description="暂无工单申请数据" />
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeMenu === 'order-approve'">
          <!-- 右侧内容区顶部栏 -->
          <div class="right-top-bar">
            <div class="top-bar-left">
              <span class="breadcrumb">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>工单审批</el-breadcrumb-item>
                </el-breadcrumb>
              </span>
            </div>
            <div class="top-bar-right">
              <span class="user-info">欢迎，{{ username }}</span>
            </div>
          </div>
          <!-- 工单审批内容 -->
          <div class="content">
            <div class="page-title-bar">
              <h2 class="page-title">工单审批列表</h2>
            </div>
            <el-skeleton v-if="loading" :loading="loading" :rows="6" style="padding: 20px"></el-skeleton>
            <div class="workorder-list" v-else>
              <div class="workorder-card" v-for="(item, index) in workorderList" :key="index"
                @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
                <div class="workorder-info">
                  <div class="workorder-header">
                    <h3 class="workorder-title">{{ item.taskName }}</h3>
                    <span :class="['status-tag', statusClass(item.status)]">
                      {{ statusText(item.status) }}
                    </span>
                  </div>
                  <div class="workorder-meta">
                    <div class="meta-item">
                      <i class="el-icon-location"></i>
                      <span>作业地点：{{ item.address }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-time"></i>
                      <span>预计作业时间：{{ item.estimatedHomeworkTime }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-warning"></i>
                      <span>优先级：{{ item.priority }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-document"></i>
                      <span>关联项目：{{ item.projectInfo }}</span>
                    </div>
                    <div class="meta-item">
                      <i class="el-icon-cpu"></i>
                      <span>无人机：{{ item.uavName }}</span>
                    </div>
                  </div>
                  <div class="workorder-description">
                    <i class="el-icon-location"></i>
                    <p>任务描述：{{ item.taskDescription || "暂无任务描述" }}</p>
                  </div>
                  <div class="workorder-actions">
                    <el-button type="success" size="small" @click="handleApproveWorkorder(item)"
                      v-if="item.status === '0'">
                      审批
                    </el-button>
                  </div>
                </div>
              </div>
              <!-- 空状态处理 -->
              <div class="empty-state" v-if="workorderList.length === 0">
                <el-empty description="暂无工单申请数据" />
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Document, Edit } from "@element-plus/icons-vue";
import {
  ElMessage,
  ElSkeleton,
  ElBreadcrumb,
  ElBreadcrumbItem,
} from "element-plus";
import axios from "axios";

const router = useRouter();
const activeMenu = ref("order-manage");
const username = ref("");
const accountNumber = ref("");
const workorderList = ref([]);
const loading = ref(true);
const route = useRoute();
// 组件挂载时获取用户信息
onMounted(() => {
  const userInfoStr = localStorage.getItem("userInfo");
  if (userInfoStr) {
    const userInfo = JSON.parse(userInfoStr);
    username.value = userInfo.name;
    accountNumber.value = userInfo.accountNumber;
  }

  // 检查路由参数，自动切换菜单
  const route = useRoute();
  if (route.query.tab === "approve") {
    activeMenu.value = "order-approve";
  }

  // 获取工单列表
  fetchWorkorderList();
});

watch(
  () => route.query.tab,
  (newTab) => {
    if (newTab === "approve" || newTab === "manage") {
      fetchWorkorderList();
    }
  }
);

function handleMenuSelect(key) {
  activeMenu.value = key;
  // 更新路由参数
  if (key === "order-approve") {
    router.push({ path: "/workorder", query: { tab: "approve" } });
  } else {
    router.push({ path: "/workorder", query: { tab: "manage" } });
  }
}

function goToApplyOrder() {
  router.push("/workorder/apply");
}

// 获取工单列表
async function fetchWorkorderList() {
  try {
    const res = await axios.get("/tielingpowergriduavservice/task/list");
    if (res.data && res.data.code === 200) {
      workorderList.value = res.data.data || [];
    } else {
      workorderList.value = [];
      ElMessage.error(res.data?.message || "获取工单数据失败");
    }
  } catch (e) {
    workorderList.value = [];
    ElMessage.error("请求工单数据异常");
  } finally {
    loading.value = false;
  }
}

// 状态文本
function statusText(status) {
  if (status === "0") return "待审批";
  if (status === "1") return "工单审批通过";
  if (status === "2") return "工单审批拒绝";
  if (status === "4") return "出库通过";
  if (status === "5") return "出库拒绝";
  return "未知";
}

// 状态样式类
function statusClass(status) {
  if (status === "0") return "pending";
  if (status === "1" || status === "4") return "approved";
  if (status === "2" || status === "5") return "rejected";
  return "";
}

// 卡片交互
const handleMouseEnter = (index) => {
  const card = document.querySelectorAll(".workorder-card")[index];
  if (card) {
    card.style.transform = "translateY(-5px)";
    card.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)";
  }
};

const handleMouseLeave = (index) => {
  const card = document.querySelectorAll(".workorder-card")[index];
  if (card) {
    card.style.transform = "translateY(0)";
    card.style.boxShadow = "0 4px 15px rgba(0,0,0,0.05)";
  }
};

// 审批工单
const handleApproveWorkorder = (item) => {
  // 跳转到工单审批详情页面
  router.push({
    path: "/workorder/approve",
    query: { id: item.id },
  });
};
</script>

<style scoped>
.workorder-home {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  display: flex;
  flex: 1;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.el-menu-vertical-demo {
  background: transparent;
  border-right: none;
  width: 100%;
}

.el-menu-item {
  color: #fff;
  font-size: 16px;
  height: 48px;
  line-height: 48px;
}

.el-menu-item.is-active {
  background: #199893 !important;
  color: #fff !important;
}

/* 右侧内容区域整体容器 */
.main-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8fafc;
  padding: 0;
}

/* 右侧内容区顶部栏 */
.right-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0 20px;
  height: 50px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 9;
}

.right-top-bar .top-bar-left {
  display: flex;
  align-items: center;
}

.right-top-bar .breadcrumb {
  font-size: 14px;
  color: #666;
}

.right-top-bar .top-bar-right {
  color: #333;
}

.right-top-bar .user-info {
  line-height: 50px;
}

/* 原右侧内容区样式调整，让内容在顶部栏下方 */
.content {
  flex: 1;
  padding: 30px 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 100px);
}

/* 标题栏优化 */
.page-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
}

.page-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #3498db;
  margin-right: 10px;
  border-radius: 2px;
}

.add-btn {
  background-color: #3498db;
  border-color: #3498db;
  transition: all 0.3s;
}

.add-btn:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}

/* 工单列表样式 */
.workorder-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workorder-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.workorder-info {
  width: 100%;
}

.workorder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.workorder-title {
  font-size: 18px;
  font-weight: 500;
  color: #2c3e50;
  margin: 0;
  line-height: 1.3;
}

.status-tag {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 16px;
  display: inline-block;
}

.status-tag.pending {
  background: #fffbe6;
  color: #e6a23c;
}

.status-tag.approved {
  background: #e6fffb;
  color: #13ce66;
}

.status-tag.rejected {
  background: #fff0f0;
  color: #ff4949;
}

.workorder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #7f8c8d;
}

.meta-item i {
  margin-right: 6px;
  font-size: 16px;
  color: #95a5a6;
}

.workorder-description {
  margin-bottom: 16px;
}

.workorder-description p {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.workorder-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* 空状态样式 */
.empty-state {
  width: 100%;
  padding: 60px 0;
  display: flex;
  justify-content: center;
}

/* 保留原有的工单审批页面样式 */
.workorder-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  gap: 32px;
}

.action-btn {
  font-size: 16px;
  padding: 12px 32px;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(25, 152, 147, 0.12);
  background: linear-gradient(90deg, #199893 0%, #4fd1c5 100%);
  color: #fff;
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn.el-button--success {
  background: linear-gradient(90deg, #34c759 0%, #4fd1c5 100%);
}

.action-btn:hover {
  background: linear-gradient(90deg, #12706b 0%, #199893 100%);
  box-shadow: 0 4px 16px rgba(25, 152, 147, 0.18);
}

.action-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(25, 152, 147, 0.1);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  min-width: 220px;
  transition: box-shadow 0.2s, transform 0.25s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.action-card:hover {
  box-shadow: 0 12px 32px rgba(25, 152, 147, 0.22);
  transform: scale(1.06) translateY(-4px);
  z-index: 2;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .workorder-card {
    padding: 20px;
  }
}

@media (max-width: 992px) {
  .content {
    padding: 20px 30px;
  }

  .workorder-meta {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .page-title-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .add-btn {
    width: 100%;
  }

  .workorder-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>
